<style lang="less">
 @import './menu.less';
</style>

<template>
  <nav class="menu">
    <nuxt-link
      v-for="it in dataSource"
      :key="it.name"
      :to="it.path"
      class="menu-item"
      :class="{ 'menu-item__actived': selected === it.path }"
    >
      {{ it.name }}
    </nuxt-link>
  </nav>
</template>

<script>
export default {
  props: {
    selectedKey: {
      type: String,
      default: '',
    },

    dataSource: {
      type: Array,
      default () {
        return []
      },
    },
  },

  computed: {
    selected () {
      if (this.selectedKey) {
        return this.selectedKey
      }

      const first = this.dataSource[0] || {}

      return first.path
    },
  },
}
</script>
